<template>
  <div class="paginationBox">
    <el-pagination
      v-model:current-page="pageObj.pageNo"
      v-model:page-size="pageObj.pageSize"
      :page-sizes="pageSizes"
      background
      :layout="layout"
      :total="pageObj.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- v-bind="$attrs" -->
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted } from "vue";

const props = defineProps({
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper",
  },
  pageSizes: {
    type: Array<any>,
    default: () => [10, 20, 30, 50, 100, 500],
  },
  pageObj: {
    type: Object,
    default: () => ({
      pageNo: 1,
      pageSize: 10,
      total: 0,
    }),
  },
});

const { layout, pageSizes, pageObj } = toRefs(props);

const emit = defineEmits(["sizechange", "currentChange"]);
const handleSizeChange = (val: number) => {
  emit("sizechange", val);
};
const handleCurrentChange = (val: number) => {
  emit("currentChange", val);
};
</script>

<style scoped lang="scss">
.paginationBox {
  padding: 12px 6px 2px;
  font-weight: 700;
  color: #303133;
  background-color: #fff;
}
</style>
